<template>
  <div>
    <flexbox orient="vertical">
    <flexbox-item v-for="(Post, index) in Postlist" :key="index">
    <div class="flex-demo">
    <div>
    <div class="namebox">
    <div class="namemsg">
    <img class="touxiang" :src="Post.User_tx" alt="" @click="tou(Post.User_id)">
    <div class="Tname">
    <span class="name">{{Post.User_name}}</span>
    <span class="time">{{Post.Tz_time}}</span>  
    </div>  
    </div>
    <!-- <button class="gz">关注</button> -->
    </div>

    <router-link class="rline" :to="'/Postdetails/' + id +'/'+ Post._id">
    <p class="Title"><!-- 文字内容 -->
      {{Post.Tz_text}}
    </p>
    </router-link>

    <span class="Type">#{{Post.Tz_type}}</span><!-- 类型 -->
    <div class="Timg">     <!-- 图片内容  -->     
        <img v-for="(img, index) in Post.Tz_img" :key="index" slot="icon" :src="'http://localhost:3000' + img" width="30%;" :preview='Post.Tz_text+"---"+Post.User_name'  :preview-text='Post.Tz_text+"---"+Post.User_name'>  
    </div>

    <router-link class="rline" :to="'/Postdetails/' + id +'/'+ Post._id">
    <div class="splbox" v-if="Post.Spl"><!-- 神评 -->
    <img class="spltop" src="static/img/spl.png" alt="" height="35">
    <span class="spltext">{{Post.Spl}}</span>
    </div>
    </router-link>

    <div class="Tclick">
    <router-link class="rline" :to="'/Postdetails/' + id +'/'+ Post._id"><!-- 子路径传参数再调出 -->
    <div class="Tmsg">
    <img slot="icon" src="static/img/msg.png" width="20">
    <p>{{Post.Pl==0? Post.Pl='评论':Post.Pl}}</p>
    </div>
    </router-link>
    <div class="Tlike">
    <img v-if="Post.Tz_likeuser[0]=='false'" slot="icon" src="static/img/like.png" width="20" @click="Clicked(Post)">
    <img v-if="Post.Tz_likeuser[0]=='true'" slot="icon" src="static/img/like1.png" width="20" @click="Clicked(Post)">
    <p v-show="Post.Tz_like>0">{{Post.Tz_like}}</p>
    </div>
    <div class="Tunlike">
    <img v-if="Post.Tz_unlikeuser[0]=='false'" slot="icon" src="static/img/unlike.png" width="20" @click="unClicked(Post)">
    <img v-if="Post.Tz_unlikeuser[0]=='true'" slot="icon" src="static/img/unlike1.png" width="20" @click="unClicked(Post)">
    <p v-show="Post.Tz_like<0">{{Post.Tz_like}}</p>
    </div>
    </div>

    </div>
    </div>
    </flexbox-item>
    </flexbox>
  <div>
    <p v-if="loadshow" class="load" @click="GET(),loadshow=false">加载更多</p>
    <load-more v-else :tip="('正在加载')"></load-more>
  </div>
  </div>
</template>
<script>
import { TransferDom } from 'vux'
export default {
    inject:['reload'],
    directives: {
    TransferDom
    },
    components: {
    },
    data () {
      return {
        isBoolean: null,
        i: null,
        id:this.$store.state.wd.wdid,
        Postlist: [],
        page:-1,
        loadshow:true
      }
    },
    created(){
    },
    mounted(){
        this.$vux.loading.show();
        this.GET();
        this.$previewRefresh();
    },
    watch:{
      "$route" : "GET"
    },
    methods: {
      tou(x){
        this.$router.push('/Nd/' + x);
      },
      Clicked(x){//点赞
      if(x.Tz_unlikeuser=='false'){
        if(x.Tz_likeuser[0]=='false'){
        x.Tz_like++,
        this.$http.post("http://localhost:3000/post/postdz",
            {
            Tz_id:x._id,
            Tz_user:x.User_id,
            User_id:this.$store.state.wd.wdid,
            like:x.Tz_likeuser[0],
            T_like:x.Tz_like,
            },{emulateJSON: true})
            .then(
            (response)=>{
              this.$set(x.Tz_likeuser,0,'true')
              this.$vux.toast.show({
              type: 'text',
              text: '点赞成功',
              position: 'middle',
              time: '1000'
              })
            },
            (error)=>{
            console.log(error);
            }
            );
        }
        if(x.Tz_likeuser[0]=='true'){
        x.Tz_like--,
        this.$http.post("http://localhost:3000/post/postdz",
            {
            Tz_id:x._id,
            Tz_user:x.User_id,
            User_id:this.$store.state.wd.wdid,
            like:x.Tz_likeuser[0],
            T_like:x.Tz_like,
            },{emulateJSON: true})
            .then(
            (response)=>{
              this.$set(x.Tz_likeuser,0,'false')
              this.$vux.toast.show({
              type: 'text',
              text: '取消赞',
              position: 'middle',
              time: '1000'
              })
            },
            (error)=>{
            console.log(error);
            }
            );
        }
        }else if(x.Tz_unlikeuser=='true'){
        this.$vux.toast.show({
        type: 'text',
        text: '你已点踩',
        position: 'middle',
        time: '1000'
        })
        }
      },
      unClicked(x){//点踩
      if(x.Tz_likeuser=='false'){
      if(x.Tz_unlikeuser[0]=='false'){
        x.Tz_like--;
        this.$http.post("http://localhost:3000/post/postdc",
            {
            Tz_id:x._id,
            Tz_user:x.User_id,
            User_id:this.$store.state.wd.wdid,
            unlike:x.Tz_unlikeuser[0],
            T_like:x.Tz_like,
            },{emulateJSON: true})
            .then(
            (response)=>{
              this.$set(x.Tz_unlikeuser,0,'true')
              this.$vux.toast.show({
              type: 'text',
              text: '点踩成功',
              position: 'middle',
              time: '1000'
              })
            },
            (error)=>{
            console.log(error);
            }
            );
        }
        if(x.Tz_unlikeuser[0]=='true'){
        x.Tz_like++;
        this.$http.post("http://localhost:3000/post/postdc",
            {
            Tz_id:x._id,
            Tz_user:x.User_id,
            User_id:this.$store.state.wd.wdid,
            unlike:x.Tz_unlikeuser[0],
            T_like:x.Tz_like,
            },{emulateJSON: true})
            .then(
            (response)=>{
              this.$set(x.Tz_unlikeuser,0,'false')
              this.$vux.toast.show({
              type: 'text',
              text: '取消踩',
              position: 'middle',
              time: '1000'
              })
            },
            (error)=>{
            console.log(error);
            }
            );
        }
        }else if(x.Tz_likeuser=='true'){
          this.$vux.toast.show({
          type: 'text',
          text: '你已点赞',
          position: 'middle',
          time: '1000'
        })
        }
      },

      GET(){//获取所有帖子
            this.$vux.loading.show();
            this.page++;
            var that = this;
            var type = this.$route.params.type;
            that.$http.post("http://localhost:3000/post/getpost",
            {
            User_id:this.$store.state.wd.wdid,
            Tz_type:type,
            page:this.page,
            },{emulateJSON: true})
            .then(
            (response)=>{   
            setTimeout(() => {
            if(response.data.msg.tzs!=''){
            for(let i = 0; i < response.data.msg.tzs.length;i++){
            let tz =response.data.msg.tzs[i]._id;
            var pl =response.data.msg.tzs[i].Pl;
            that.Postlist.push(response.data.msg.tzs[i]);
            that.$http.post("http://localhost:3000/pl/getpl",//获取评论
            {
            Tz_id:tz,
            User_id:this.$store.state.wd.wdid,
            },{emulateJSON: true})
            .then(
            (response)=>{
              let t = (that.page*5) + i;      
              if(response.data.msg.pls!=null){
              that.Postlist[t].Pl=response.data.msg.pls.length;
              if(response.data.msg.pls[0].Pl_like>5){
                that.Postlist[t].Spl=response.data.msg.pls[0].Pl_text;
              }
              }
            },
            (error)=>{
                console.log("err");
            });//
            }}
            else{
              this.$vux.toast.show({
              type: 'text',
              text: '没有帖子了！',
              position: 'middle',
              time: '1000'
              }) 
            }
            this.$vux.loading.hide();
            this.loadshow=true;
            },1000);
            },
            (error)=>{
                console.log("err");
            });
    },
  },
  
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';

.rline{
text-decoration:none;  /*超链接无下划线*/
color: #000;
}
.flex-demo {//帖子css
  width: 100%;
  background-color: #f8f6f6;
  border-radius: 4px;
  background-clip: padding-box;

  display: flex;
  display: -webkit-flex;
  flex-direction: column;
}
.namebox{
  margin-top: 10px;
  display: flex;
  justify-content:space-between;
  align-items:center;
}
.namemsg{
  margin-left: 20px;
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
  width: 70%;
}
.Tname{
  display: flex;
  flex-direction: column;
}
.touxiang{
    background-color: aliceblue;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    margin-right: 20px;
}
.name{
  margin-bottom: 5px;
  width: 200px;
  color: rgb(59, 59, 59);
  font-size: 14px;
  white-space:nowrap; 
  text-overflow:ellipsis;
  overflow:hidden;
}
.time{
  color: rgb(88, 88, 88);
  font-size: 12px;
}
.gz{
  margin-right: 20px;
  white-space:nowrap; 
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
  border-radius: 15px;
  font-size: 12px;
  padding: 5px 15px;

}
.Tclick{
  display: flex;
  align-items:center;
  justify-content:space-around;
  margin-bottom: 10px;
  margin-top: 10px;
}
.Tmsg{
  display: flex;
  align-items:center;
  justify-content:space-around;
}
.Tlike{
  display: flex;
  align-items:center;
  justify-content:space-around;
}
.Tunlike{
  display: flex;
  align-items:center;
  justify-content:space-around;
}
.Title{
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
  margin-right: 20px;
  display: -webkit-box;    
  -webkit-box-orient: vertical;    
  -webkit-line-clamp: 6;    //文章6行隐藏
  overflow: hidden;
}
.Timg{
  margin: 20px;
}
.Type{
    margin-left: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 2px;
    padding-top: 2px;
    font-size: 12px;
    color: #008CBA;
    border: 2px solid #008CBA;
    border-radius: 5px;
}

.splbox{
  position:relative;
  margin-left: 20px;
  margin-right: 20px;
  background-color:lightgrey;
  border-radius: 5px;
  padding: 15px;
}
.spltop{
  position:absolute;
  top:0;
  left:0;
}
.spltext{
  font-size: 85%;
}
.load{
  color: rgb(56, 150, 238);
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}
</style>